<script setup>
import {ElSpace,ElCard,ElCol,ElRow} from "element-plus";
import MediaStore from "../../store/MediaStore.js";
const store = MediaStore();
store.getData()
</script>

<template>
  <el-row>
    <el-col v-for="(v,i) in store.filterData" :key="i" :span="6">
      <el-card  class="audio-card"  body-class="audio-content" footer-class="audio-footer"  >
        <template #default>
          <div>
            {{v.url}}
          </div>
        </template>
        <template #footer>
          <div>
            {{v?.author?v.author:"佚名"}}
          </div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style>
.audio-card {
  width: 94%;
  cursor: pointer;
  margin-top: 14px;
  background-color: rgba(255,255,255,.4);
  border:0px solid transparent;
}
.audio-content {
  padding: 0;
  width:100%;
  height:120px;
  margin: 0;

}
.audio-footer{
  margin:0;
  padding:2px;
  background-color: rgba(255,255,255,.4);


}
</style>